<template>
  <div class="example1">
    <div class="grid-item">
      <data-v-panel>
        <template #title> 圆圈 </template>
        <template #body>
          <data-v-circle progress="68"></data-v-circle>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>水波纹组件</template>
        <template #body>
          <data-v-droplet progress="68"></data-v-droplet>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>环形</template>
        <template #body>
          <data-v-ring></data-v-ring>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>环形2</template>
        <template #body>
          <data-v-ring type="2"></data-v-ring>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>一种柱状图</template>
        <template #body>
          <data-v-pic-bar></data-v-pic-bar>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>一种柱状图</template>
        <template #body>
          <data-v-pic-bar type="2"></data-v-pic-bar>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item">
      <data-v-panel>
        <template #title>气泡图</template>
        <template #body>
          <data-v-bubble :list="list"></data-v-bubble>
        </template>
      </data-v-panel>
    </div>
    <div class="grid-item" v-for="i in 9" :key="i">{{ i + 1 }}</div>
    <go-home></go-home>
  </div>
</template>

<script>
export default {
  name: "example1",
  data() {
    return {
      list: [
        {
          id: 1,
          name: "审核通过率",
          value: "86.96%"
        },
        {
          id: 2,
          name: "中签率",
          value: "20.68%"
        },
        {
          id: 3,
          name: "未中签",
          value: "79,032"
        },
        {
          id: 4,
          name: "审核未通过",
          value: "4396"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="less">
.example1 {
  height: calc(100vh);
  display: grid;
  gap: 10px;
  grid-template-rows: repeat(3, calc(33.3% - 10px));
  grid-template-columns: repeat(5, calc(20% - 10px));
  padding-left: 10px;
  padding-top: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
  .grid-item {
    // display: flex;
    // width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  overflow: hidden;

  .c-panel {
    height: 100%;
  }
}
</style>
